<template>
  <div class="base-list">
    <!-- 列表标题 -->
    <div v-if="title" class="mb-3 flex justify-between items-center">
      <h3 class="text-lg font-medium text-gray-800">{{ title }}</h3>
      <slot name="header-action"></slot>
    </div>
    
    <!-- 列表内容 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
      <!-- 空状态 -->
      <div v-if="items.length === 0" class="py-12 flex flex-col items-center justify-center text-gray-500">
        <slot name="empty">
          <div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-gray-100">
            <FileX class="w-8 h-8 text-gray-400" />
          </div>
          <p>{{ emptyText }}</p>
        </slot>
      </div>
      
      <!-- 列表项 -->
      <div v-else class="divide-y divide-gray-100">
        <div 
          v-for="(item, index) in items" 
          :key="index"
          class="p-4 hover:bg-gray-50 transition-colors"
          :class="{'cursor-pointer': clickable}"
          @click="clickable ? $emit('item-click', item) : null"
        >
          <slot name="item" :item="item" :index="index">
            <div class="flex justify-between items-center">
              <div>
                <div class="font-medium text-gray-800">{{ item.title || item.name || '未命名项目' }}</div>
                <div v-if="item.description" class="text-sm text-gray-500 mt-1">{{ item.description }}</div>
              </div>
              <ChevronRight v-if="clickable" class="w-5 h-5 text-gray-400" />
            </div>
          </slot>
        </div>
      </div>
    </div>
    
    <!-- 加载更多 -->
    <div v-if="hasMore" class="mt-4 text-center">
      <button 
        @click="$emit('load-more')" 
        class="px-4 py-2 text-sm text-green-600 hover:text-green-700 transition-colors"
        :disabled="loading"
      >
        {{ loading ? '加载中...' : '加载更多' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ChevronRight, FileX } from 'lucide-vue-next';

defineProps({
  items: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: ''
  },
  emptyText: {
    type: String,
    default: '暂无数据'
  },
  clickable: {
    type: Boolean,
    default: true
  },
  hasMore: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
});

defineEmits(['item-click', 'load-more']);
</script>